<template>
  <div class="index" ref="ebook">
    <ebook-header></ebook-header>
    <ebook-book-mark></ebook-book-mark>
    <ebook-title></ebook-title>
    <ebook-reader></ebook-reader>
    <ebook-menu></ebook-menu>
    <ebook-footer></ebook-footer>
  </div>
</template>

<script>
import EbookReader from "@/components/ebook/EbookReader";
import EbookTitle from "@/components/ebook/EbookTitle";
import EbookMenu from "@/components/ebook/EbookMenu";
import {getReadTime, saveReadTime} from "@/utils/localStorage";
import {ebookMixin} from "@/utils/mixin";
import EbookBookMark from "@/components/ebook/EbookBookMark";
import EbookHeader from "@/components/ebook/EbookHeader";
import EbookFooter from "@/components/ebook/EbookFooter";

export default {
  name: "index",
  mixins: [ebookMixin],
  components: { EbookFooter,EbookReader, EbookTitle, EbookMenu, EbookBookMark, EbookHeader},
  methods: {
    startLoopReadTime() {
      let readTime = getReadTime(this.fileName)
      if (!readTime) {
        readTime = 0
      }
      this.task = setInterval(() => {
        readTime++
        if (readTime % 30 === 0) {
          saveReadTime(this.fileName, readTime)
        }
      }, 1000)
    },
    restore() {
      const style = this.$refs.ebook.style
      style.top = 0
      style.transition = 'all .2s linear'
      setTimeout(() => {
        style.transition = ''
      }, 200)
    },
    move(v) {
      const style = this.$refs.ebook.style
      style.top = v + 'px'

    }
  },
  mounted() {
    this.startLoopReadTime()
  },
  watch: {
    offsetY(val) {
      // console.log(val)
      if (!this.menuVisible && this.bookAvailable) {
        if (val > 0) {
          this.move(val)
        } else if (val === 0) {
          this.restore()
        }
      }
    }
  },
  beforeDestroy() {
    if (this.task) {
      clearInterval(this.task)
    }
  }

}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/global';

.index {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
